<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        button{
            margin:4px;
        }
        #pagination{
            width: 600px;
            padding: 0;
            /* 弹性盒子 */
            display: flex;
            justify-content: center;
        }
        #pagination li{
            list-style: none;
            background: #666;
            text-align: center;
            color: white;
            padding: 2px 8px;
            margin: 0 3px;
        }
        input{
            width: 100px;
        }
    </style>
    <script src="js/jquery-3.3.1.min.js"></script>
    <script>
        // 获取用户信息
        function loadUsers(page=1){ // 参数page默认值为1
            $.ajax({
                type:'get',
                url:'http://localhost:8881/ums/user/findByPage',
                data:{
                    page: page,
                    rows: 5,
                    name: $('#name').val(),
                    phone: $('#phone').val(),
                    status: $('#status').val()
                },
                dataType:'json',
                success:function(res){
                    if(res.status == 200){
                        // 清空数据
                        $('#tb').empty()
                        $('#pagination').empty()

                        // 获取用户数据
                        let users = res.data.records
                        for(let i in users){
                            let user = users[i]
                            let tr = $('<tr>')
                                .append($('<td>').text(Number(i)+1))
                                .append($('<td>').text(user.name))   
                                .append($('<td>').text(user.phone))   
                                .append($('<td>').text(user.address))   
                                .append($('<td>').text(user.status==0?"启用":"禁用"))   
                                .append($('<td>')
                                            .append($('<button>').text('修改').click(function(){
                                                localStorage.setItem('userId', user.id)
                                                location.href = 'modify.html'
                                            }))
                                            .append($('<button>').text('删除').click(function(){
                                                // 调用删除方法
                                                removeById(user.id)
                                            }))
                                            .append($('<button>').text(user.status==0?"禁用":"启用").click(function(){
                                                // 调用启用禁用方法
                                                modifyStatus(user.id,user.status==0?1:0)
                                            }))
                                )   
                            $('#tb').append(tr)
                        }

                        // 获取分页信息
                        let pages = res.data.pages // 总页数
                        let current = res.data.current // 当前页码
                        $('#pagination').append($('<li>').text('上一页').click(function(){
                            loadUsers(current==1?1:current-1)
                        }))
                        for(let i=1;i<=pages;i++){ // 使用let，不要使用let
                            $('#pagination').append($('<li>').text(i).css('background',current==i?'#ff7300':'#666').click(function() {
                                // 调用查询方法
                                loadUsers(i)
                            }))
                        }
                        $('#pagination').append($('<li>').text('下一页').click(function(){
                            loadUsers(current==pages?pages:current+1)
                        }))
                    }
                }
            })
        }

        // 跳转到添加页面
        function toAdd(){
            location.href = 'add.html'
        }

        // 删除用户
        function removeById(id){
            if(confirm('确定要删除吗？')){
                $.ajax({
                    url: 'http://localhost:8881/ums/user/removeById',
                    data: {
                        id: id
                    },
                    dataType: 'json',
                    success: function(res){
                        if(res.status == 200){
                            alert('删除成功！')
                            loadUsers() // 重新加载数据
                        }
                    }
                })
            }
        }

        // 修改用户状态
        function modifyStatus(id, status) {
            $.ajax({
                url: 'http://localhost:8881/ums/user/modifyStatus',
                data: {
                    id: id,
                    status: status
                },
                dataType: 'json',
                success: function(res){
                    if(res.status == 200){
                        // alert('修改状态成功！')
                        loadUsers() // 重新加载数据
                    }
                }
            })
        }

        // 页面加载完成后执行
        $(function(){
            loadUsers()
        })
    </script>
</head>
<body>
    <h2>用户管理系统</h2>
    <button onclick="toAdd()">添加用户</button>
    <br>

    姓名：<input type="text" id="name" placeholder="请输入姓名">&nbsp;&nbsp;
    电话：<input type="text" id="phone" placeholder="请输入电话">&nbsp;&nbsp;
    状态：<select id="status">
            <option value="">全选</option>
            <option value="0">启用</option>
            <option value="1">禁用</option>
         </select>&nbsp;&nbsp;
         <button onclick="loadUsers()">查询</button>
    <br>

    <!-- table>(thead>tr>th*6)+tbody>tr>td*6 -->
    <table border="1" width="600px" cellspacing="0">
        <thead>
            <tr>
                <th>序号</th>
                <th>姓名</th>
                <th>电话</th>
                <th>地址</th>
                <th>状态</th>
                <th>操作</th>
            </tr>
        </thead>
        <tbody id="tb" align="center">
            
        </tbody>
    </table>
    
    <ul id="pagination">
        
    </ul>
</body>
</html>